<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags" %>  
<c:set var="contextPath" value="<%=request.getContextPath()%>"></c:set> 
<!DOCTYPE html>
<html lang="en">
<head>
	<title>Tables - Ace Admin</title>
	
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery.js"></script>
	<script src="${contextPath}/static/js/jquery-migrate-1.1.0.js"></script>
	<script src="${contextPath}/static/js/jquery.jqprint-0.3.js"></script>

	<script type="text/javascript">
	$(function(){
		//点击按钮后。在modal里面更新数据
		$('.showScoreBtn').click(function() {
			var scoreId = $(this).attr('scoreId');
			$.ajax({
				type: 'POST',
				url: '${contextPath}/student/showScore',
				data: {
					scoreId: scoreId
					},
				dataType: "json",
				success: function(data){
					$('#userName').text(data.userName);
					$('#subjectName').text(data.subjectName);
					$('#examTime').text(data.examTimeString);
					$('#score').text(data.score);
					}
				});
				$('#showScoreModal').modal('show');
		});
		
		//使用jqprint打印modal框内的内容
		$('#scorePrint').click(function() {
			$('#showScoreModal .modal-body').jqprint();
		});
		
		//确认是否考试
		$(".test_enter").click(function(){
			if(confirm("确认是否考试？")){
				return true;
			}else{
				return false;
			}
		});
	

	});
	
	</script>
	
</head>
<body class="no-skin">
	<!-- /section:settings.box -->
	<div class="page-content-area">
	<a class="btn btn-primary"><i class="ace-icon fa fa-pencil ">&nbsp;&nbsp;学生查看科目</i></a>
		<div class="row">
			<div class="col-xs-12">
				<!-- PAGE CONTENT BEGINS -->
				<div class="row">
					<div class="col-xs-12">
						<table id="sample-table-1" class="table table-striped table-bordered table-hover">
							<thead>
								<tr>
									<th>科目编号</th>
									<th>科目名</th>
									<th>科目描述</th>
									<th>科目题数</th>
									<th>总时长</th>
									<th>潢分总分</th>
									<th>是否开启考试</th>
									<th>本科目得分</th>
									<th>是否已参考</th>
									<th>操作</th>
								</tr>
							</thead>

							<tbody>
							<c:forEach items="${examSubjectList }" var="sub">
								<tr>
									<td>${sub.subId }</td>
									<td>${sub.name }</td>
									<td>${sub.description }</td>
									<td>${sub.testCount }</td>
									<td>${sub.totalTime }</td>
									<td>${sub.totalScore }</td>
									<td>
										<%--if () else if () else if ()     else  --%>
										<c:choose>
											<c:when test="${sub.status == 0 }">
												<label class="label arrowed">已关闭</label>
											</c:when>
											<c:otherwise>
												<label class="label label-success arrowed-in arrowed-in-right">已开启</label>
											</c:otherwise>
										</c:choose>
									</td>
									<td>${sub.score.score }</td>
									<td>
										<c:choose>
											<c:when test="${sub.score == null }">
												<label class="label label-success arrowed-in arrowed-in-right">未参考</label>
											</c:when>
											<c:otherwise>
												<label class="label arrowed">已参考</label>
											</c:otherwise>
										</c:choose>
									</td>
									<td>
										<c:choose>
											<c:when test="${sub.score == null }">
											<c:choose>
												<c:when test="${sub.status == 0 }">
													<a title="进入考试" disabled="disabled" class="btn btn-success btn-xs"><i class="ace-icon fa fa-pencil"></i></a>
												</c:when>
												<c:otherwise>
													<a   title="进 入 考  试" href="${contextPath }/student/toTest/${sub.subId }" class="btn btn-success btn-xs test_enter"><i class="ace-icon fa fa-pencil"></i></a>
												</c:otherwise>
											</c:choose>
											</c:when>
											<c:when test="${empty sub.score.score && sub.score.remainingExamTime > 0}"><!--已经开始考试，中途关闭-->
												<a title="进入考试" href="${contextPath }/student/toTest/${sub.subId }" class="btn btn-success btn-xs "><i class="ace-icon fa fa-pencil"></i></a>
											</c:when>
											<c:otherwise>
												<a title="查看成绩" scoreId="${sub.score.id }" class="btn btn-info btn-xs showScoreBtn"><i class="ace-icon fa fa-eye"></i></a>
											</c:otherwise>
										</c:choose>
									</td>
								</tr>
							</c:forEach>

							</table>
						</div>
					</div>
				</div>
				
				<!-- 显示成绩－模态框（Modal） -->
				<div class="modal fade" id="showScoreModal" tabindex="-1" role="dialog" aria-labelledby="showTestModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
									&times;
								</button>
								<h4 class="modal-title" id="showTestModalLabel">
									查看科目成绩
								</h4>
							</div>
							<div class="modal-body">
								<p><label>用户名:</label><label id="userName">andy</label></p>
								<p><label>科目名:</label><label id="subjectName">English</label></p>
								<p><label>考试时间:</label><label id="examTime">2016-10-18</label></p>
								<p><label>得分:</label><label id="score">80</label></p>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">关闭
								</button>
								<button id="scorePrint" type="button" class="btn btn-primary" >
									打印
								</button>
							</div>
						</div><!-- /.modal-content -->
					</div><!-- /.modal -->
				</div>
				
				<div id="modal-table" class="modal fade" tabindex="-1">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header no-padding">
								<div class="table-header">
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
										<span class="white">&times;</span>
									</button>
									Results for "Latest Registered Domains
								</div>
							</div>

							<div class="modal-body no-padding">
								<table class="table table-striped table-bordered table-hover no-margin-bottom no-border-top">
									<thead>
										<tr>
											<th>Domain</th>
											<th>Price</th>
											<th>Clicks</th>

											<th>
												<i class="ace-icon fa fa-clock-o bigger-110"></i>
												Update
											</th>
										</tr>
									</thead>

									<tbody>
										<tr>
											<td>
												<a href="#">ace.com</a>
											</td>
											<td>$45</td>
											<td>3,330</td>
											<td>Feb 12</td>
										</tr>

										<tr>
											<td>
												<a href="#">base.com</a>
											</td>
											<td>$35</td>
											<td>2,595</td>
											<td>Feb 18</td>
										</tr>

										<tr>
											<td>
												<a href="#">max.com</a>
											</td>
											<td>$60</td>
											<td>4,400</td>
											<td>Mar 11</td>
										</tr>

										<tr>
											<td>
												<a href="#">best.com</a>
											</td>
											<td>$75</td>
											<td>6,500</td>
											<td>Apr 03</td>
										</tr>

										<tr>
											<td>
												<a href="#">pro.com</a>
											</td>
											<td>$55</td>
											<td>4,250</td>
											<td>Jan 21</td>
										</tr>
									</tbody>
								</table>
							</div>

							<div class="modal-footer no-margin-top">
								<button class="btn btn-sm btn-danger pull-left" data-dismiss="modal">
									<i class="ace-icon fa fa-times"></i>
									Close
								</button>

								<ul class="pagination pull-right no-margin">
									<li class="prev disabled">
										<a href="#">
											<i class="ace-icon fa fa-angle-double-left"></i>
										</a>
									</li>

									<li class="active">
										<a href="#">1</a>
									</li>

									<li>
										<a href="#">2</a>
									</li>

									<li>
										<a href="#">3</a>
									</li>

									<li class="next">
										<a href="#">
											<i class="ace-icon fa fa-angle-double-right"></i>
										</a>
									</li>
								</ul>
							</div>
						</div><!-- /.modal-content -->
					</div><!-- /.modal-dialog -->
				</div><!-- PAGE CONTENT ENDS -->
			</div><!-- /.col -->
		</div><!-- /.row -->
	</body>
</html>